<template>
  <view class="audit-list-container">

    <!-- 审核项目列表 -->
    <view v-for="(item, index) in auditList" :key="index" class="audit-item-card">
      <view class="audit-item-header">
        <view class="audit-item-title-status">
          <text class="audit-item-title">{{ item.title }}</text>
          <text class="audit-item-status">{{ item.status }}</text>
        </view>
      </view>

      <view class="audit-item-details">
        <view class="audit-item-info">
          <text>申请时间：{{ item.auditTime }}</text>
        </view>
        <view class="audit-item-info">
          <text>申请类型：{{ item.type }}</text>
        </view>
      </view>

      <!-- 在卡片右侧添加箭头图标，表示可以点击进入详情 -->
      <view class="audit-item-actions" @click="viewDetails(item)">
        <icon type="arrowright" size="24" color="#007AFF" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟的待审核项目数据
      auditList: [
        {
          title: '神鹏岛',
          status: '待审核',
          auditTime: '2024-12-25 10:00',
          type: '类型 A',
          id: 1
        },
        {
          title: '仕泰598',
          status: '待审核',
          auditTime: '2024-12-24 14:30',
          type: '类型 B',
          id: 2
        },
        {
          title: '项目 3',
          status: '待审核',
          auditTime: '2024-12-23 09:20',
          type: '类型 C',
          id: 3
        },
      ]
    };
  },
  methods: {
    viewDetails(item) {
      // 点击箭头图标时，跳转到审核详情页面
      uni.navigateTo({ url: `/pages/audit/auditDetails?id=${item.id}` });
    }
  }
};
</script>

<style scoped>
.audit-list-container {
  padding: 20px;
  background-color: #f4f6f9;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.audit-item-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audit-item-header {
  margin-bottom: 15px;
  width: 42%;
}

.audit-item-title-status {
  display: flex;
  flex-direction: column; /* 将项目名称和状态垂直排列 */
  justify-content: center;
}

.audit-item-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.audit-item-status {
  font-size: 16px;
  color: #ff6f61;
  margin-top: 5px; /* 项目名称和状态之间添加一些间距 */
}

.audit-item-details {
  margin-bottom: 15px;
}

.audit-item-info {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.audit-item-actions {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.audit-item-actions icon {
  font-size: 24px;
  color: #007AFF;
}

.audit-item-actions:hover icon {
  color: #005bb5;
}
</style>
